<template>
	<view class="item">
		<view class="left">
			<view class="l">
				<text>{{message.firstNum}}
			</text></view>
			<view class="c">
				<text>{{message.symbol}}</text>
			</view>
			<view class="r">
				<text>{{message.lastNum}}</text>
			</view>
		</view>
		<view class="center">
			<text>=</text>
		</view>
		<view class="right">
			<text @click="resClick(message)">{{result}}</text>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	
	export default {
		data() {
			return {
				result: '查看答案',
			}
		},
		props: {
		    message: {
				type: Object,
				default() {
					return {}
				}
		    }
		},
		computed: {
		  ...mapGetters(['getterDigit'])
		},
		watch: {
		  getterDigit(message) {
		    this.change()
		  }
		},
		methods: {
			resClick(msg) {
			    this.result = msg.result
			},
			change() {
			  this.result = '查看答案'
			}
		}
	}
</script>

<style>
	.item {
		width: 750upx;
		height: 80upx;
		display: flex;
		border-bottom: 4upx solid #96876f;
		border-radius: 6upx;
		/* margin: 20upx 0; */
		padding: 18upx 0;
		line-height: 80upx;
		text-align: center;
		font-size: 30upx;
	}

	.left {
	  flex: 55%;
	  margin-left: 20upx;
	  font-weight: 800;
	  display: flex;
	}
	.l, .r {
		flex: 45%;
	}
	.c {
		flex: 10%;
	}
	.left text {
		margin: 0 16upx;
	}
	
	.center {
		flex: 5%;
	}
	
	.right {
		flex: 40%;
		font-weight: 800;
		color: #000000;
		background-color: #ef5425;
		margin: 0 60upx;
		border-radius: 6upx;
		width: 300upx;
	}
</style>
